<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>修改自定义SQL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-textarea.is-disabled .el-textarea__inner,.el-input.is-disabled .el-input__inner{
            color: #606266;
            background-color: #fff;
        }
        .el-textarea.is-disabled .el-textarea__inner{
            cursor: default
        }
        .el-descriptions-item__label{
            width: 80px;
        }
        .el-checkbox__inner {
            z-index: 0;
        }
        .connection-label{
            font-size: 14px;
            background-color: rgb(245, 245, 245);
            padding: 5px 10px;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-form :model="form" :rules="rules" ref="contract" inline-message="true" style="width: 100%">
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="table_titel">
                        <div class="titel">查询表名</div>
                    </div>
                    <el-descriptions :column="2" border size="small">
                        <el-descriptions-item label="SQL标识">
                            <el-form-item prop="SQL_SerialNumber">
                                <el-input placeholder="请输入SQL标识" v-model.trim="form.SQL_SerialNumber"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="SQL名称">
                            <el-form-item prop="SQL_Name">
                                <el-input placeholder="请输入SQL名称" v-model.trim="form.SQL_Name"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="查询表名">
                            <el-form-item prop="SQL_SerialNumber">
                                <el-select style="width: 100%;" v-model="tableName" placeholder="请选择查询的表">
                                    <el-option v-for="item in table.filter(i=>i.TABLE_NAME!='V_FieldsName'&&!selecteTable.some(j=>j==i.TABLE_NAME))"
                                        :key="item.TABLE_NAME" :label="item.TABLE_NAME" :value="item.TABLE_NAME"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="关联表名">
                            <el-form-item prop="SQL_Name">
                                <el-select style="width: 100%;" v-model="selecteTable" multiple collapse-tags placeholder="请选择查询的表">
                                    <el-option v-for="item in table.filter(i=>i.TABLE_NAME!='V_FieldsName'&&i.TABLE_NAME!=tableName)"
                                        :key="item.TABLE_NAME" :label="item.TABLE_NAME" :value="item.TABLE_NAME"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
                <el-col :span="24">
                    <div class="table_titel">
                        <div class="titel">关联关系</div>
                    </div>
                    <div style="height: 500px;overflow: auto;position: relative; background: rgb(245, 245, 245); width: 100%;">
                        <!-- 主表表单 -->
                        <div v-if="tableName && tableData.length > 0" :id="tableName" style="background: rgb(255, 245, 199); width: 200px; border: 2px solid #fddb69; font-size: 14px;  position: absolute; left: 10px; top: 10px;">
                            <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center; line-height: 30px; background-color: rgb(252, 225, 109); font-weight: 700;">{{tableName}}</div>
                            <div style="display: flex;flex-direction: column;">
                                <div v-for="(item,index) in tableData" :style="{borderBottom:index==tableData.length-1?'none':'1px solid #fddb69'}" :key="index" :id="tableName+'.'+item.COLUMN_NAME" 
                                    style="width: 100%;height: 30px;display: flex;align-items: center;">
                                    <el-checkbox style="margin-left: 10px;" v-model="item.isShow"></el-checkbox>
                                    <div style="margin: 0 10px 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center; line-height: 30px;">{{item.COLUMN_NAME}}</div>
                                </div>
                            </div>
                        </div>
                        <!-- 关联表单 -->
                        <div v-for="obj in subTable" :key="obj.tableName" :id="obj.tableName" :style="{border:lineList.some(i=>i.targetId == obj.tableName)?'2px solid #acacac':'2px solid red'}" style="background: rgb(241, 241, 241); width: 200px; font-size: 14px; position: absolute; right: 20px; top: 10px;">
                            <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center; line-height: 30px; background-color: #ccc; font-weight: 700;">{{obj.tableName}}</div>
                            <div style="display: flex;flex-direction: column;">
                                <div v-for="(item,index) in obj.tableData" :style="{borderBottom:index==obj.tableData.length-1?'none':'1px solid #ccc'}" :key="index" :id="obj.tableName+'.'+item.COLUMN_NAME" 
                                    style="width: 100%;height: 30px;display: flex;align-items: center;">
                                    <el-checkbox style="margin-left: 10px;" v-model="item.isShow"></el-checkbox>
                                    <div style="margin: 0 10px 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center; line-height: 30px;">{{item.COLUMN_NAME}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="table_titel">
                        <div class="titel">查询字段</div>
                    </div>
                    <el-table stripe border :data="allTableData.filter(i=>i.isShow)" height="500px" style="width: 100%">
                        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
                        <el-table-column align="center" show-overflow-tooltip prop="TABLE_NAME" label="所属表"></el-table-column>
                        <el-table-column align="center" show-overflow-tooltip prop="COLUMN_NAME" label="查询字段"></el-table-column>
                        <el-table-column align="center" prop="Name" label="指定名称">
                            <template v-slot="{row}">
                                <el-input placeholder="可输入指定名称" v-model="row.NickName"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="10">
                    <div class="table_titel">
                        <div class="titel">预览</div>
                    </div>
                    <el-input disabled :autosize="{ maxRows:18, minRows: 18}" type="textarea" :value="sqlString"></el-input>
                </el-col>
                <el-col :span="14">
                    <div class="table_titel">
                        <div class="titel">查询预览(仅查询10条)</div>
                    </div>
                    <el-table v-if="isShow" stripe border :data="showTable" height="390px" style="width: 100%">
                        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
                        <template v-if="showTable.length > 0">
                            <el-table-column v-for="(value,key) in showTable[0]" :key="key" align="center" :prop="key" :label="key"></el-table-column>
                        </template>
                        <el-table-column v-else align="center" label="暂未查询到数据"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-dialog title="关联属性" :visible.sync="dialogVisible" width="700px">
                <el-descriptions :column="2" border size="small">
                    <el-descriptions-item label="1.表名">
                        <el-input :value="selectLine.sourceId" disabled></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="2.表名">
                        <el-input :value="selectLine.targetId" disabled></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="1.字段名">
                        <el-input :value="selectLine.sourceUuid?selectLine.sourceUuid.slice(0, -2).split('.')[1]:''" disabled></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="2.字段名">
                        <el-input :value="selectLine.targetUuid?selectLine.targetUuid.slice(0, -2).split('.')[1]:''" disabled></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="连接方式">
                        <el-select style="width: 100%;" v-model="selectLine.Join" placeholder="请选择连接方式">
                            <el-option v-for="item in Join" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-descriptions-item>
                </el-descriptions>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel">返 回</el-button>
                    <el-button type="success" @click="submitSave">保 存</el-button>
                    <el-button type="danger" @click="removeSave">删 除</el-button>
                </span>
            </el-dialog>
            <div style="height: 90px;"></div>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../utils/jsplumb.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/edit.js"></script>
</body>

</html>